<template>
    <div class="login">
        <div class="log">
            <P style="color:rgb(4, 64, 238);font-size: 22px;font-weight: 700;">发票系统</P>
            <div class="one">
                <input type="text" placeholder="请输入账号" v-model="ruleForm.user">
                <input type="password" placeholder="请输入密码" v-model="ruleForm.pass">
                <button @click="Submit">登录</button>
            </div>
        </div>
        <p class="two">canvas /canvas iai sdasiodhsaoad</p>
        <p class="two">网景公司有限公司</p>
    </div>
</template>
<script setup lang="ts">
import { ref} from 'vue'
import { useRouter } from 'vue-router'
import { getLogin } from '../api/index';
let router = useRouter()
let ruleForm = ref({
    user: "",
    pass: "",
})
console.log(ruleForm.value);
let Submit = () => {
    if (ruleForm.value.user == '') {
        alert('用户名不能为空')
    } else if (ruleForm.value.pass == '') {
        alert('密码不能为空')
    } else {
        getLogin({user:ruleForm.value.user,pass:ruleForm.value.pass}).then((data: any) => {
            let {code,token}=data;
            if (code == 200) {
                localStorage.setItem('token', token)
                router.push('/home')
            } else {
                ruleForm.value.user = '',
                ruleForm.value.pass = ''
            }
        })
    }
}
</script>
<style scoped >
.two {
    color: white;
    font-size: 10px;
}
.login {
    width: 100vw;
    height: 100vh;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
}
.one input {
    width: 300px;
    height: 30px;
    text-indent: 1rem;
    color: rgb(173, 173, 173);
    border: none;
    border: 1px solid #ccc;
    margin-top: 20px;
    outline: none;
}
.one {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.one button {
    width: 300px;
    height: 30px;
    border: none;
    color: white;
    background-color: rgb(11, 94, 253);
    margin-top: 20px;
}
.log {
    width: 360px;
    height: 420px;
    margin-bottom: 30px;
    background-color: white;
}
.log p {
    width: 100%;
    margin-top: 10px;
    text-align: center;
}
.log b {
    display: block;
    width: 100%;
    margin-top: 10px;
    text-align: center;
}
</style>
